/*****************************************************************************************
 **  Author:COCO 2022
 *****************************************************************************************/
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
import gridHeader from './warehouse/Ware_ReturnMaterialsGridHeader'
let extension = {
  data() {
    return {
      // Materials: [],
      // MaterialList: [],
    }
  },
  components: {
    //查询界面扩展组件
    gridHeader,
    gridBody: '',
    gridFooter: '',
    //新建、编辑弹出框扩展组件
    modelHeader: '',
    modelBody: '',
    modelFooter: '',
  },
  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
  methods: {
    //下面这些方法可以保留也可以删除
    onInit() {
      //框架初始化配置前，
      //示例：在按钮的最前面添加一个按钮
      //   this.buttons.unshift({  //也可以用push或者splice方法来修改buttons数组
      //     name: '按钮', //按钮名称
      //     icon: 'el-icon-document', //按钮图标vue2版本见iview文档icon，vue3版本见element ui文档icon(注意不是element puls文档)
      //     type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button
      //     onClick: function () {
      //       this.$Message.success('点击了按钮');
      //     }
      //   });

      //示例：设置修改新建、编辑弹出框字段标签的长度
      // this.boxOptions.labelWidth = 150;
      //显示序号(默认隐藏)
      this.columnIndex = true
      // this.boxButtons.forEach((item) => {
      //   if (item.value == 'save') {
      //     item.onClick = async () => {
      //       // console.log(this.editFormFields)
      //       // console.log(this.$store.state.userInfo);
      //       // let {
      //       //   ProductCode,
      //       //   ProductName,
      //       //   ProductStandard,
      //       //   Remark,
      //       //   ReturnMaterialsMan,
      //       //   ReturnMaterialsQnty,
      //       //   ReturnProductCode,
      //       //   MatType,
      //       // } = this.editFormFields
      //       // if (!ReturnProductCode) return this.$Message.error('请选择退料订单')
      //       // if (!ProductCode) return this.$Message.error('请选择产品')
      //       // if (!ReturnMaterialsMan) return this.$Message.error('请填写退料人')
      //       // if (!ReturnMaterialsQnty)
      //       //   return this.$Message.error('请填写退料数量')

      //       // let res = await this.http.post(
      //       //   '/api/Ware_ReturnMaterials/InsertReturnMaterials',
      //       //   {
      //       //     RMlist: [
      //       //       {
      //       //         productCode: ProductCode,
      //       //         remark: Remark,
      //       //         returnMaterialsMan: ReturnMaterialsMan,
      //       //         returnMaterialsQnty: ReturnMaterialsQnty,
      //       //         returnProductCode: ReturnProductCode,
      //       //         productName: ProductName,
      //       //         productStandard: ProductStandard,
      //       //         matType: MatType,
      //       //       },
      //       //     ],
      //       //   },
      //       //   true
      //       // )
      //       // if (res.status) {
      //       //   this.$message.success('新建成功')
      //       //   this.boxModel = false
      //       //   this.search()
      //       // } else {
      //       //   this.$message.error(res.message)
      //       // }

      //     }
      //   }
      // })

      // let { permission } = this.$store.getters.getPermission(
      //   '/Ware_ReturnMaterials'
      // )
      this.buttons.forEach((item) => {
        if (item.value == 'Add') {
          item.onClick = () => {
            this.$refs.gridHeader.open()
          }
        }
      })

      // if (permission.includes('print')) {
      //   this.buttons.push({
      //     name: '打 印',
      //     icon: 'el-icon-printer',
      //     type: 'warning',
      //     onClick: () => {
      //       let selected = this.$refs.table.getSelected()
      //       if (selected.length == 0)
      //         return this.$message.error('请选择要打印的数据')
      //       let list = []
      //       selected.forEach((item) => {
      //         if (!list.includes(item.ReturnProductCode))
      //           list.push(item.ReturnProductCode)
      //       })
      //       if (list.length > 1)
      //         return this.$message.error('请选择同一退料单号的数据')
      //       let data = {
      //         mainData: selected[0].ReturnProductCode,
      //         detailData: selected,
      //       }
      //       this.print(data)
      //     },
      //   })
      // }

      // this.editFormOptions.forEach((item) => {
      //   item.forEach((x) => {
      //     if (x.field == 'ReturnProductCode') {
      //       x.onChange = async (value) => {
      //         if (value !== '') {
      //           this.editFormFields.ProductName = ''
      //           this.editFormFields.ProductCode = ''
      //           this.editFormFields.ProductStandard = ''
      //           this.editFormFields.MatType = ''
      //           let res = await this.http.get(
      //             `/api/Production_WorkOrder/GetBOMMatrail?MoCode=${value}`,
      //             null,
      //             true
      //           )
      //           this.Materials = res.map((item) => {
      //             return {
      //               key: item.productCode,
      //               value: item.productCode,
      //             }
      //           })
      //           this.MaterialList = res
      //           this.editFormOptions.forEach((it) => {
      //             it.forEach((i) => {
      //               if (i.field == 'ProductCode') {
      //                 i.data = this.Materials
      //                 i.onChange = (value) => {
      //                   let result = this.MaterialList.find(
      //                     (d) => d.productCode == value
      //                   )
      //                   this.editFormFields.ProductName = result.productName
      //                   this.editFormFields.ProductStandard =
      //                     result.productStandard
      //                   this.editFormFields.MatType = result.sType
      //                 }
      //               }
      //             })
      //           })
      //         }
      //       }
      //     }
      //   })
      // })
    },
    onInited() {
      //框架初始化配置后
      //如果要配置明细表,在此方法操作
      //this.detailOptions.columns.forEach(column=>{ });
    },
    searchBefore(param) {
      //界面查询前,可以给param.wheres添加查询参数
      //返回false，则不会执行查询
      return true
    },
    searchAfter(result) {
      //查询后，result返回的查询数据,可以在显示到表格前处理表格的值
      return true
    },
    addBefore(formData) {
      //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
      return true
    },
    updateBefore(formData) {
      //编辑保存前formData为对象，包括明细表、删除行的Id
      return true
    },
    rowClick({ row, column, event }) {
      //查询界面点击行事件
      // this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
    },
    modelOpenAfter(row) {
      //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
      //(1)判断是编辑还是新建操作： this.currentAction=='Add';
      //(2)给弹出框设置默认值
      //(3)this.editFormFields.字段='xxx';
      //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
      //看不懂就把输出看：console.log(this.editFormOptions)
    },
    print(data) {
      console.log(data)
      let printWindow = window.open('', '_blank')
      printWindow.document.open()
      let style = `<style>
                      .title {
                        text-align:center;
                        position: relative;
                      }

                      .header {
                        display: flex;
                        margin-bottom: 20px;
                      }

                      .t_head {
                        flex: 1;
                      }

                      .t_head .th_item {
                        display: flex; 
                        list-style: none;
                      }

                      .t_head .th_item .th_title {
                        flex: 1; 
                        display: flex;
                        text-align: left;
                        text-indent: 20;
                      }

                      .th_title .th_title_space {
                        display: inline-block; 
                      }

                      #qrcodeImg {
                        width: 100px; 
                        height: 100px;
                        margin-left: 10px;
                      }

                      .grid_table {
                        width: 100%; 
                        border: 1px solid #000; 
                        border-collapse: collapse;
                      }

                      th {
                        border: 1px solid black;  
                      }

                      .grid_table tr td {
                        border: 1px solid black;
                      }

                      .grid_table tbody {
                        text-align:center;
                      }

                      .footer {
                        display: flex; 
                        justify-content: 
                        space-between; 
                        list-style: none;
                      }

                      .footer_space {
                        margin-left: 30px;
                        display: inline-block; 
                        width: 150px; 
                        border-bottom: 1px solid #000;
                      }

                      .version {
                        margin-top: 15px;
                      }
                    </style>`

      let title = `<div>
                        <h1 class="title">昆山鸿永峻精密五金电子科技有限公司</h1>
                        <h1 class="title">退料单</h1>
                    </div>`

      // let header = `<div class="header">
      //                   <div class="t_head">
      //                     <ul class="th_item">
      //                       <li class="th_title">
      //                         客户名称:
      //                         <span class="th_title_space" style="margin-left: 5px;">${CusName}</span>
      //                       </li>

      //                       <li class="th_title">
      //                         地址:
      //                         <span class="th_title_space" style="margin-left: 5px;">昆山市周市镇青阳北路565号</span>
      //                       </li>
      //                     </ul>

      //                     <ul class="th_item">
      //                       <li class="th_title">
      //                         送货日期:
      //                         <span class="th_title_space" style="margin-left: 5px;">2023-11-16</span>
      //                       </li>
      //                       <li class="th_title">
      //                         电话/传真:
      //                         <span class="th_title_space" style="margin-left: 5px;">0512-57905229</span>
      //                       </li>
      //                     </ul>
      //                   </div>

      //                   <div id="qrcodeImg"></div>
      //               </div>`

      let footer = `<div>
                    <ul class="footer"> 
                        <li>
                          审核:
                          <span class="footer_space"></span>
                        </li>
                        <li>
                          核准:
                          <span class="footer_space"></span>
                        </li>
                    </ul>
                  <div>`

      // let result = chunkArray(data.deliveryDetail, 24)
      let result = [data.detailData]
      // console.log(result)
      let body = ``
      result.forEach((arr) => {
        let main = ``
        arr.forEach((item, index) => {
          main += `<tr style="border: 1px dotted black;">
          <td>${item.ProductName}</td>
          <td>${item.ProductCode}</td>
          <td>${item.ProductStandard}</td>
          <td>${item.ReturnMaterialsMan}</td>
          <td>${item.ReturnMaterialsQnty}</td>
          <td>${item.Remark ? item.Remark : ''}</td>
        </tr>`
        })

        body += `<table class="grid_table">
          <thead>
            <tr>
              <th colspan="2">退料订单</th>
              <th colspan="4">${data.mainData.ReturnProductCode}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="6">退料明细</td>
            </tr>
            <tr>
              <td>物料名称</td>
              <td>物料编码</td>
              <td>规格</td>
              <td>退料人</td>
              <td>退料数量</td>
              <td>备注</td>
            </tr>
            ${main}
            <tr>
              <td colspan="6">注：本单作为退料依据，敬请妥善保管。</td>
            </tr>
          </tbody>
        </table>${footer}`
      })

      // let sscript = ` <script src="/qrcode.min.js" type="application/javascript"></script>
      //                 <script>
      //                   window.addEventListener("DOMContentLoaded", ()=> {
      //                     const qrcodeImgEl = document.getElementById('qrcodeImg')
      //                     qrcodeImgEl.innerHTML = ''
      //                     let qrcode = new QRCode(qrcodeImgEl, {
      //                                             width: 100,
      //                                             height: 100,
      //                                             colorDark: '#000000',
      //                                             colorLight: '#ffffff',
      //                                             correctLevel: QRCode.CorrectLevel.H,
      //                                   })
      //                     qrcode.makeCode('${deliveryOrderCode}')
      //                   })
      //                 </script>`
      printWindow.document.write(
        `<html><head><title>Print</title>${style}</head><body>`
      )
      printWindow.document.write(title)
      // printWindow.document.write(header)
      printWindow.document.write(body)
      printWindow.document.write(`</body></html>`)
      printWindow.document.close()
      setTimeout(() => {
        printWindow.print()
        printWindow.close()
      }, 100)
    },
  },
}
export default extension
